<template>
  <div class="content">
    <!-- <loading></loading> -->
    <div id="container" style="height: 100%" v-if="showLoading"></div>
    <el-row :gutter="10">
      <el-col :span="12">
        <div
          v-loading="mabiao"
          style="
            background-color: #ffffff;
            margin-left: 10px;
            margin-top: 10px;
            height: 300px;
          "
        >
          <div
            style="
              height: 50px;
              background-color: rgb(255, 255, 255);
              line-height: 50px;
              padding-left: 20px;
              border-bottom: 1px solid #0000002e;
            "
          >
            完成情况
          </div>
          <div style="width: 100%; display: flex">
            <div id="bin" style="height: 250px; width: 50%"></div>
            <div id="bin2" style="height: 250px; width: 50%"></div>
          </div></div
      ></el-col>
      <el-col :span="12"
        ><div
          class="finish_list"
          style="
            background-color: #fff;
            margin-right: 10px;
            height: 300px;
            margin-right: 10px;
            margin-top: 10px;
          "
        >
          <div
            style="
              height: 50px;
              background-color: #f0f0f0;
              line-height: 50px;
              padding-left: 20px;
              border-bottom: 1px solid green;
              display: flex;
            "
          >
            <img src="" alt="" />
            <div>完成情况</div>
          </div>
          <div class="row_body" style="overflow-y: auto; height: 250px">
            <div
              class="list"
              v-for="(item, index) in the_month_accomplish_List"
              :key="index"
              @click="faculty_details(item)"
            >
              <div class="row-top">
                <div class="dot"></div>
                <div class="row">
                  <div class="row-title" style="width: 150px">
                    {{ item.title }}
                  </div>
                  <div
                    class="row-grow"
                    style="margin-left: 20px; min-width: 100px"
                  >
                    {{ item.shool }}
                  </div>
                  <div class="row-school" style="margin-left: 10px">
                    得分：{{ item.sum }}
                  </div>
                </div>
              </div>
              <div class="lines"></div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24"
        ><div class="histogram">
          <div class="button">
            <div>
              <el-switch
                v-model="value1"
                active-text="深色模式"
                inactive-text=""
                @change="histogram_dark"
              >
              </el-switch>
              <el-select
                v-model="value"
                placeholder="平均分"
                @change="selectWenjuan"
              >
                <el-option
                  v-for="item in allwenjuan_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div v-if="clear">
              <el-button @click="getZhuzhuang(), (clear = !clear)"
                >清除数据</el-button
              >
            </div>
          </div>
          <div :key="componentKey"><div id="main2"></div></div></div
      ></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="line">
          <div class="button">
            <div>
              <el-switch
                v-model="value2"
                active-text="深色模式"
                inactive-text=""
                @change="line_dark"
              >
              </el-switch>
              <el-select
                v-model="value"
                placeholder="请选择"
                @change="selectXueyuan"
              >
                <el-option
                  v-for="item in allxueyuan_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div v-if="clear2">
              <el-button @click="lineData_initial(), (clear2 = !clear2)"
                >清除数据</el-button
              >
            </div>
          </div>
          <div :key="line_componentKey"><div id="main1"></div></div></div
      ></el-col>
    </el-row>

    <!-- el-dialog  -->
    <div id="dialog">
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div>
          <div style="margin-bottom: 20px">选中内容：</div>
          <div>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane label="用户管理" name="first">
                <div class="tabs">
                  <div
                    class="body"
                    v-for="(item, index) in personal_every_academy"
                    :key="index"
                  >
                    <div class="ab_list">
                      <div class="title">
                        <span></span>
                        <span>{{ item.key }}：</span>
                      </div>
                      <div class="title_content">{{ item.value }}</div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  allXueyuanwj,
  allXueyuanwjs,
  scoreStatistics,
  xueyuanwj,
} from "@/api/analysis";
import { allwenjuan } from "@/api/rating";
import { allxueyuan } from "@/api/academic";
import loading from "@/components/loading/index";
import * as echarts from "echarts";
import { set } from "js-cookie";

export default {
  data() {
    return {
      showLoading: true,
      //柱状图数据
      ZZ_data: "",
      //折线图数据
      ZX_data: "",

      value1: false,
      value2: false,
      componentKey: 0,

      line_componentKey: 0,

      //柱状图选项
      allwenjuan_options: [],
      allxueyuan_options: [],
      allwenjuan_names: [],
      allxueyuan_names: [],

      value: "",

      clear: false,
      clear2: false,

      //部门个数
      depaetmentNum: 0,

      percentage: "",

      aaaa: null,

      mabiao: false,

      //本月用户完成情况
      the_month_accomplish_List: [],
      personal_every_academy: [], //详情

      // 对话框
      dialogVisible: false,

      //tabs标签页
      activeName: "first",
    };
  },
  components: {
    loading,
  },

  mounted() {
    this.loading();
    setTimeout(() => {
      this.showLoading = false;
      this.mabiao = true;
      //折线图
      this.getZhexian();
      //柱状图
      this.getZhuzhuang();
    }, 1500);
  },

  created() {
    this.allxueyuan();
    this.allwenjuan();
  },

  methods: {
    loading() {
      var dom = document.getElementById("container");
      var myChart = echarts.init(dom, null, {
        renderer: "canvas",
        useDirtyRect: false,
      });
      var app = {};

      var option;

      option = {
        graphic: {
          elements: [
            {
              type: "group",
              left: "center",
              top: "center",
              children: new Array(7).fill(0).map((val, i) => ({
                type: "rect",
                x: i * 20,
                shape: {
                  x: 0,
                  y: -40,
                  width: 10,
                  height: 80,
                },
                style: {
                  fill: "#5470c6",
                },
                keyframeAnimation: {
                  duration: 1000,
                  delay: i * 200,
                  loop: true,
                  keyframes: [
                    {
                      percent: 0.5,
                      scaleY: 0.3,
                      easing: "cubicIn",
                    },
                    {
                      percent: 1,
                      scaleY: 1,
                      easing: "cubicOut",
                    },
                  ],
                },
              })),
            },
          ],
        },
      };

      if (option && typeof option === "object") {
        myChart.setOption(option);
      }

      window.addEventListener("resize", myChart.resize);
    },

    bin_chart2(num, binStyle2) {
      var chartDom = document.getElementById("bin2");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        series: [
          {
            type: "gauge",
            startAngle: 360,
            endAngle: 0,
            min: 0,
            max: 100,
            splitNumber: 0,
            itemStyle: {
              color: binStyle2.color,
              shadowColor: binStyle2.shadowColor,
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18,
            },
            pointer: {
              icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
              length: "",
              width: 16,
              offsetCenter: [0, "5%"],
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                width: 18,
              },
            },
            axisTick: {
              splitNumber: 2,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            //刻度线
            splitLine: {
              length: 0,
              lineStyle: {
                width: 0,
                color: "#888",
              },
            },
            axisLabel: {
              distance: 30,
              color: "#999",
              fontSize: 0,
            },
            title: {
              offsetCenter: [0, "45%"],
              fontSize: 15,
            },
            detail: {
              backgroundColor: "#fff",
              borderColor: "#999",
              borderWidth: 0,
              width: "60%",
              lineHeight: 50,
              height: 50,
              borderRadius: 8,
              offsetCenter: [0, "0%"],
              valueAnimation: true,
              formatter: function (value) {
                return "{value|" + value.toFixed(0) + "}{unit|%}";
              },
              rich: {
                value: {
                  fontSize: 40,
                  fontWeight: "bolder",
                  color: "#777",
                },
                unit: {
                  fontSize: 20,
                  color: "#999",
                  padding: [0, 0, -10, 0],
                },
              },
            },
            data: [
              {
                value: num,
                name: "完成率",
              },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },

    bin_chart(num, binStyle1) {
      var chartDom = document.getElementById("bin");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        series: [
          {
            type: "gauge",
            startAngle: 360,
            endAngle: 0,
            min: 0,
            max: 100,
            splitNumber: 0,
            itemStyle: {
              color: binStyle1.color,
              shadowColor: binStyle1.shadowColor,
              shadowBlur: 10,
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
            progress: {
              show: true,
              roundCap: true,
              width: 18,
            },
            pointer: {
              icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
              length: "",
              width: 16,
              offsetCenter: [0, "5%"],
            },
            axisLine: {
              roundCap: true,
              lineStyle: {
                width: 18,
              },
            },
            axisTick: {
              splitNumber: 2,
              lineStyle: {
                width: 2,
                color: "#999",
              },
            },
            //刻度线
            splitLine: {
              length: 0,
              lineStyle: {
                width: 0,
                color: "#888",
              },
            },
            axisLabel: {
              distance: 30,
              color: "#999",
              fontSize: 0,
            },
            title: {
              offsetCenter: [0, "45%"],
              fontSize: 15,
            },
            detail: {
              backgroundColor: "#fff",
              borderColor: "#999",
              borderWidth: 0,
              width: "60%",
              lineHeight: 50,
              height: 50,
              borderRadius: 8,
              offsetCenter: [0, "0%"],
              valueAnimation: true,
              formatter: function (value) {
                return "{value|" + value.toFixed(0) + "}{unit|%}";
              },
              rich: {
                value: {
                  fontSize: 40,
                  fontWeight: "bolder",
                  color: "#777",
                },
                unit: {
                  fontSize: 20,
                  color: "#999",
                  padding: [0, 0, -10, 0],
                },
              },
            },
            data: [
              {
                value: num,
                name: "合格率",
              },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },

    //获取所有问卷
    allwenjuan() {
      allwenjuan().then((res) => {
        const data = [];
        const names = [];
        res.data.forEach((response) => {
          var a = {
            value: response.id,
            label: response.title,
          };
          data.push(a);
          names.push(response.title);
        });
        this.allwenjuan_options = data;
        this.allwenjuan_names = names;
        this.getMonthWenjuan(res.data);
      });
    },

    //获取所有学院
    allxueyuan() {
      allxueyuan().then((res) => {
        this.depaetmentNum = res.data.length;
        const data = [];
        const names = [];
        res.data.forEach((response) => {
          var a = {
            value: response.id,
            label: response.named,
          };
          data.push(a);
          names.push(response.named);
        });
        this.allxueyuan_options = data;
        this.allxueyuan_names = names;
      });
    },

    //获取本月问卷
    getMonthWenjuan(data) {
      function getNowFormatDate() {
        let date = new Date(),
          year = date.getFullYear(), //获取完整的年份(4位)
          month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        // strDate = date.getDate(); // 获取当前日(1-31)
        if (month < 10) month = `0${month}`; // 如果月份是个位数，在前面补0
        // if (strDate < 10) strDate = `0${strDate}`; // 如果日是个位数，在前面补0

        return `${year}-${month}`;
      }

      function fuzzyQuery(list, keyWord) {
        var arr = list.filter((item) => {
          return item.endtime.indexOf(keyWord) >= 0;
        });
        return arr;
      }
      //获取本月问卷
      // let thisMonth = fuzzyQuery(data, getNowFormatDate());
      let thisMonth = fuzzyQuery(data, "2023-10");
      if (thisMonth.length > 1) {
        var eachSum = [];
        var chenggong = 0;
        let g;
        g = {
          id: [],
        };
        thisMonth.forEach((a) => {
          g.id.push(a.id);
        });
        do {
          if (g.id.length == thisMonth.length) {
            let numAnd;
            numAnd = 0;
            scoreStatistics(g).then((res) => {
              res.data.forEach((item, index, array) => {
                numAnd += item.length;
                item.forEach((element) => {
                  if (element.shool == null && element.sum == null) {
                    return;
                  } else {
                    this.the_month_accomplish_List.push(element);
                    eachSum.push(element.sum);
                    if (element.sum >= 60) {
                      chenggong++;
                    }
                  }
                });
                if (index == array.length - 1) {
                  let i = thisMonth.length * this.depaetmentNum;
                  this.percentage = (eachSum.length / i) * 100;
                  let wcheng = (eachSum.length / i) * 100;
                  let hege = (chenggong / i) * 100;
                  this.mabiao = false;
                  this.bin_chart(hege, changecolor1(wcheng));
                  this.bin_chart2(wcheng, changecolor2(hege));
                  if (i !== 0) {
                    setTimeout(() => {
                      this.mabiao = false;
                    }, 1000);
                  }
                }
              });
            });
          }
        } while (g.id.length != thisMonth.length);
      } else {
        var identify = {
          id: [thisMonth[0].id],
        };
        scoreStatistics(identify).then((res) => {
          var eachSum = [];
          var chenggong2;
          chenggong2 = 0;
          res.data[0].forEach((element, index, array) => {
            if (element.shool == null && element.sum == null) {
              return;
            } else {
              eachSum.push(element.sum);
              if (element.sum >= 60) {
                chenggong2++;
              }
            }
            if (index == array.length - 1) {
              let i = this.depaetmentNum;
              this.percentage = (eachSum.length / i) * 100;
              let wcheng = (eachSum.length / i) * 100;
              let hege = (chenggong2 / i) * 100;
              this.mabiao = false;
              this.bin_chart(hege, changecolor1(wcheng));
              this.bin_chart2(wcheng, changecolor2(hege));
              if (i !== 0) {
                setTimeout(() => {
                  this.mabiao = false;
                }, 1000);
              }
            }
          });
        });
      }

      //圆形图颜色判断选择工具1
      function changecolor1(wcheng) {
        var binStyle1;
        binStyle1 = {};
        if (100 / 3 > wcheng) {
          binStyle1.color = "#bf0000";
          binStyle1.shadowColor = "#bf000073";
        } else if (100 * (2 / 3) > wcheng && wcheng >= 100 / 3) {
          binStyle1.color = "#ffc107";
          binStyle1.shadowColor = "#ffc10773";
        } else {
          binStyle1.color = "#4caf50";
          binStyle1.shadowColor = "#4caf5073";
        }
        return binStyle1;
      }
      //圆形图颜色判断选择工具2
      function changecolor2(hege) {
        var binStyle2;
        binStyle2 = {};
        if (100 / 3 > hege) {
          binStyle2.color = "#bf0000";
          binStyle2.shadowColor = "#bf000073";
        } else if (100 * (2 / 3) > hege >= 100 / 3) {
          binStyle2.color = "#ffc107";
          binStyle2.shadowColor = "#ffc10773";
        } else {
          binStyle2.color = "#4caf50";
          binStyle2.shadowColor = "#4caf5073";
        }
        return binStyle2;
      }
    },

    //选择问卷
    selectWenjuan(a) {
      let id = {
        id: [a],
      };
      scoreStatistics(id).then((res) => {
        var data = [];
        res.data[0].forEach((ele) => {
          let m = {
            name: ele.shool,
            data: ele.sum,
          };
          data.push(m);
        });
        this.data_processing(data);
        this.clear = true;
      });
    },

    //选择学院
    selectXueyuan(a) {
      //bit_id用于判断图表颜色
      var bit_id;
      let lineColor = {};
      bit_id = parseInt(a % 10);
      if (bit_id == 1) {
        lineColor = {
          itemStyle: "rgb(8, 191, 236)",
          areaStyle0: "rgb(128, 255, 165)",
          areaStyle1: "rgb(1, 191, 236)",
        };
      } else if (bit_id == 2) {
        lineColor = {
          itemStyle: "rgb(990, 70, 131)",
          areaStyle0: "rgb(255, 158, 68)",
          areaStyle1: "rgb(909, 70, 131)",
        };
      } else if (bit_id == 3) {
        lineColor = {
          itemStyle: "rgb(116, 21, 219)",
          areaStyle0: "rgb(55, 162, 255)",
          areaStyle1: "rgb(116, 21, 219)",
        };
      } else if (bit_id == 4) {
        lineColor = {
          itemStyle: "rgb(135, 0, 157)",
          areaStyle0: "rgb(255, 0, 135)",
          areaStyle1: "rgb(135, 0, 157)",
        };
      } else if (bit_id == 5) {
        lineColor = {
          itemStyle: "rgb(224, 62, 76)",
          areaStyle0: "rgb(255, 191, 0)",
          areaStyle1: "rgb(224, 62, 76)",
        };
      } else if (bit_id == 6) {
        lineColor = {
          itemStyle: "rgb(135, 0, 157)",
          areaStyle0: "rgb(255, 191, 0)",
          areaStyle1: "rgb(135, 0, 157)",
        };
      } else {
        lineColor = {
          itemStyle: "rgb(77, 119, 255)",
          areaStyle0: "rgb(0, 221, 255)",
          areaStyle1: "rgb(77, 119, 255)",
        };
      }
      let id = {
        id: a,
      };
      xueyuanwj(id).then((res) => {
        if (res.data.length != 0) {
          var all = [];
          res.data.forEach((ele) => {
            all.push(ele.sum);
          });
          let data = {
            name: res.data[0].shool,
            data: all,
            type: "line",
          };
          const arr = [];
          arr.push(data);
          this.line_componentKey += 1;
          this.$nextTick(() => {
            // this.lineData_processing(arr);
            this.lineData_processing_gradient(
              arr,
              lineColor,
              res.data[0].shool
            );
          });
          this.clear2 = true;
        } else {
          this.$message({
            message: "该学院暂无数据",
            type: "warning",
          });
        }
      });
    },

    //折现图
    Line_chart(data, show) {
      var chartDom = document.getElementById("main1");
      var myChart = echarts.init(chartDom, show);
      var option;
      option = {
        title: {
          left: "center",
          text: "学院得分总览",
        },
        // dataZoom: [
        //   {
        //     // 设置滚动条的隐藏与显示
        //     show: true,
        //     // 设置滚动条类型
        //     type: "slider",
        //     // 设置背景颜色
        //     backgroundColor: "rgb(19, 63, 100)",
        //     // 设置选中范围的填充颜色
        //     fillerColor: "rgb(16, 171, 198)",
        //     // 设置边框颜色
        //     borderColor: "rgb(19, 63, 100)",
        //     // 是否显示detail，即拖拽时候显示详细数值信息
        //     showDetail: false,
        //     // 数据窗口范围的起始数值
        //     startValue: 0,
        //     // 数据窗口范围的结束数值（一页显示多少条数据）
        //     endValue: 15,
        //     // empty：当前数据窗口外的数据，被设置为空。
        //     // 即不会影响其他轴的数据范围
        //     filterMode: "empty",
        //     // 设置滚动条宽度，相对于盒子宽度
        //     width: "50%",
        //     // 设置滚动条高度
        //     height: 8,
        //     // 设置滚动条显示位置
        //     left: "center",
        //     // 是否锁定选择区域（或叫做数据窗口）的大小
        //     zoomLoxk: true,
        //     // 控制手柄的尺寸
        //     handleSize: 0,
        //     // dataZoom-slider组件离容器下侧的距离
        //     bottom: 3,
        //   },
        // ],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "30px",
          // bottom: "25px",

          data: this.allxueyuan_names,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
          top: 120,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            rotate: -45,
            textStyle: {
              fontSize: "10",
            },
          },
          // nameTextStyle: { fontSize: 1 },
          data: this.allwenjuan_names,
        },
        yAxis: {
          type: "value",
        },
        series: data,
      };

      option && myChart.setOption(option);
    },

    //柱状图数据
    getZhuzhuang() {
      allXueyuanwjs().then((res) => {
        let res_data = res.data;
        this.data_processing(res_data);
      });
    },

    //折线图数据
    getZhexian() {
      allXueyuanwj().then((res) => {
        this.lineData_processing(res.data);
        // Line_chart
      });
    },

    //柱状图
    histogram(data, a) {
      var chartDom = document.getElementById("main2");
      var myChart = echarts.init(chartDom, a);
      var option;

      option = {
        title: {
          text: "指标得分总览",
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: data.xName,
        },
        series: [
          {
            label: {
              show: true,
              position: "right",
            },
            name: "数据条",
            type: "bar",
            data: data.yData,
            itemStyle: {
              borderRadius: [0, 5, 5, 0], // 重点
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },

    line_dark(a) {
      if (a) {
        let dark = "dark";
        this.line_componentKey += 1;
        this.$nextTick(() => {
          this.Line_chart(this.ZX_data, dark);
        });
      } else {
        let light = "";
        this.line_componentKey -= 1;
        this.$nextTick(() => {
          this.Line_chart(this.ZX_data, light);
        });
      }
    },

    histogram_dark(a) {
      if (a) {
        let dark = "dark";
        this.componentKey += 1;
        this.$nextTick(() => {
          this.histogram(this.ZZ_data, dark);
        });
      } else {
        let light = "";
        this.componentKey -= 1;
        this.$nextTick(() => {
          this.histogram(this.ZZ_data, light);
        });
      }
    },

    //折线图数据处理
    lineData_processing(data) {
      let newData = [];
      data.forEach((response) => {
        response.type = "line";
        // response.stack = "Total";
        newData.push(response);
      });
      this.Line_chart(newData);

      this.ZX_data = newData;
    },

    //柱状图数据处理
    data_processing(datas) {
      let ZZ_data = {
        xName: [],
        yData: [],
      };
      datas.forEach((element) => {
        ZZ_data.xName.push(element.name);
        if (element.data >= 90) {
          var a = {
            value: element.data,
            itemStyle: {
              color: "#45a049",
            },
          };
          ZZ_data.yData.push(a);
        } else if (element.data < 60) {
          var b = {
            value: element.data,
            itemStyle: {
              color: "#fc1b0b",
            },
          };
          ZZ_data.yData.push(b);
        } else {
          var c = {
            value: element.data,
            itemStyle: {
              color: "#409EFF",
            },
          };
          ZZ_data.yData.push(c);
        }
      });

      this.histogram(ZZ_data);
      this.ZZ_data = ZZ_data;
    },

    //折线图获取个个学院单个成绩后还原到初始的结果
    lineData_initial() {
      this.line_componentKey -= 1;
      this.$nextTick(() => {
        this.Line_chart(this.ZX_data);
      });
    },

    //折线图选择学院后变成渐变图表
    lineData_processing_gradient(data, lineColor, academic) {
      var chartDom = document.getElementById("main1");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
        },
        title: {
          left: "center",
          text: academic,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            rotate: -45,
            textStyle: {
              fontSize: "10",
            },
          },
          data: this.allwenjuan_names,
        },
        yAxis: {
          type: "value",
        },

        series: [
          {
            name: data[0].name,
            type: "line",
            sampling: "lttb",
            itemStyle: {
              // color: "rgb(990, 70, 131)",
              color: lineColor.itemStyle,
            },
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: lineColor.areaStyle0,
                },
                {
                  offset: 1,
                  color: lineColor.areaStyle1,
                },
              ]),
            },
            data: data[0].data,
          },
        ],
      };

      option && myChart.setOption(option);
    },

    //点击触发查看学院详情
    faculty_details(item) {
      var arr = [
        {
          key: "完成指标",
          value: item.title,
        },
        {
          key: "部门",
          value: item.shool,
        },
        {
          key: "总分",
          value: item.sum,
        },
        {
          key: "自评总分",
          value: item.ziping,
        },
      ];
      if (item.jiayuan != null || item.jiafen != 0) {
        arr.push(
          {
            key: "加分原因",
            value: item.jiayuan,
          },
          {
            key: "加分",
            value: item.jiafen,
          }
        );
      } else {
        arr.push(
          {
            key: "加分原因",
            value: "无",
          },
          {
            key: "加分",
            value: "无",
          }
        );
      }
      if (item.jianyuan != null || item.jianfen != 0) {
        arr.push(
          {
            key: "减分原因",
            value: item.jianyuan,
          },
          {
            key: "减分",
            value: item.jianfen,
          }
        );
      } else {
        arr.push(
          {
            key: "减分原因",
            value: "无",
          },
          {
            key: "减分",
            value: "无",
          }
        );
      }
      this.personal_every_academy = arr;
      this.dialogVisible = true;
    },

    // dialog关闭
    handleClose(done) {
      done();
    },

    //dialog tabs标签页
    handleClick(tab, event) {
      // console.log(tab, event);
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: calc(100vh - 84px);
  width: 100%;
  overflow: auto;
  overflow-x: hidden;
  background: #dbdbdb;

  #container {
    position: fixed;
    height: 100vh;
    width: 100%;
    background-color: #fff;
    z-index: 999;
  }

  .finish_list {
    .row_body::-webkit-scrollbar {
      width: 0 !important;
    }
    .row_body {
      .list {
        padding: 10px;
        padding-bottom: 0;
        cursor: pointer;
        .row-top {
          display: flex;
          align-items: center;

          .dot {
            min-width: 6px;
            min-height: 6px;
            margin: 0 5px;
            border-radius: 3px;
            background: #00938b;
          }

          .row {
            display: flex;
            margin-left: 10px;
            font-size: 12px;
          }
        }

        .lines {
          margin-left: 30px;
          padding-bottom: 10px;
          border-bottom: 1px solid #e6e6e6;
        }
      }
      .list:hover {
        box-shadow: 0 10px 34px rgb(31 45 61 / 40%);
        transform: scale(1.05);
        transition-duration: 0.1s;
        transform-origin: left;
        z-index: 9;
      }
    }
  }

  .line {
    padding: 20px;
    width: calc(100% - 20px);
    margin: 10px;
    background-color: #ffffff;
    .button {
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;

      ::v-deep .el-switch {
        margin-right: 25px;
      }
    }

    #main1 {
      height: 500px;
      width: 100%;
    }
  }

  .histogram {
    padding: 20px;
    width: calc(100% - 20px);
    background-color: #ffffff;
    margin: 10px;
    .button {
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;

      ::v-deep .el-switch {
        margin-right: 25px;
      }
    }

    #main2 {
      height: 400px;
      width: 100%;
    }
  }

  #dialog {
    ::v-deep .el-dialog {
      width: 600px !important;
      margin-top: 12vh !important;

      .el-dialog__body {
        height: 500px;
        // color: black;

        .tabs {
          height: 373px;
          overflow: auto;

          .body {
            width: 100%;

            .ab_list {
              display: flex;

              .title {
                display: flex;
                padding: 12px 10px 12px 0;
                width: 100px;

                :nth-child(1) {
                  height: 15px;
                  width: 4px;
                  border-radius: 10px;
                  background-color: #2979ff;
                  margin-right: 6px;
                }
              }

              .title_content {
                width: 460px;
                padding: 12px 10px 12px 0;
                word-wrap: break-word;
                word-break: break-all;
                overflow: hidden;
              }
            }
          }
        }
      }
    }
  }
}

::v-deep .el-button {
  // color: #409eff;
}
</style>